<template>
  <div class="scroll-container" @scroll="handleScroll" ref="scrollContainer">
    <!-- 加载上方提示 -->
    <div v-show="isLoadingPrev" class="loading-tip">正在加载历史数据...</div>

    <!-- 数据列表 -->
    <div class="list-container">
      <div v-for="(item, index) in items" :key="item.id" class="list-item">
        {{ item.content }} - {{ index + 1 }}
      </div>
    </div>

    <!-- 加载下方提示 -->
    <div v-show="isLoadingNext" class="loading-tip">正在加载更多数据...</div>

    <!-- 数据统计 -->
    <div class="stats">
      已加载 {{ loadedCount }} 条，共 {{ total }} 条数据
    </div>



    <!-- 继续用vue2  写一个列表页面  默认加载20条数据 向下滚动时继续加载下20条，向上滚动加载上20条，并显示总共多少条数据 及当前多少条数据 -->
  </div>
</template>

<script>
export default {
  name: 'listPage2',
  data() {
    return {
      items: [],         // 当前展示的数据
      currentPage: 0,    // 当前页码（演示用简单分页）
      total: 100,        // 总数据量（实际应从接口获取）
      isLoadingPrev: false,
      isLoadingNext: false,
      scrollThreshold: 100 // 滚动触发阈值(px)
    }
  },
  computed: {
    loadedCount() {
      return this.items.length
    }
  },
  mounted() {
    this.loadInitialData()
  },
  methods: {
    // 初始加载数据
    async loadInitialData() {
      const data = await this.fetchData(1)
      this.items = data
    },

    // 处理滚动事件（带节流）
    handleScroll: _.throttle(function (e) {
      const container = e.target
      const { scrollTop, scrollHeight, clientHeight } = container

      // 向下滚动加载
      if (scrollHeight - (scrollTop + clientHeight) < this.scrollThreshold) {
        this.loadNext()
      }

      // 向上滚动加载
      if (scrollTop < this.scrollThreshold && this.currentPage > 1) {
        this.loadPrev()
      }
    }, 200),

    // 加载下一页
    async loadNext() {
      if (this.isLoadingNext) return

      this.isLoadingNext = true
      const newData = await this.fetchData(this.currentPage + 1)
      this.items = [...this.items, ...newData]
      this.currentPage++
      this.isLoadingNext = false
    },

    // 加载上一页
    async loadPrev() {
      if (this.isLoadingPrev || this.currentPage <= 1) return

      this.isLoadingPrev = true
      const prevData = await this.fetchData(this.currentPage - 1)
      this.items = [...prevData, ...this.items]
      this.currentPage--
      this.isLoadingPrev = false

      // 保持滚动位置
      this.$nextTick(() => {
        this.$refs.scrollContainer.scrollTop = prevData.length * 50
      })
    },

    // 模拟数据请求
    fetchData(page) {
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({ length: 20 }, (_, i) => ({
            id: (page - 1) * 20 + i,
            content: `第${page}页数据`
          }))
          resolve(data)
        }, 1000)
      })
    }
  }
}
</script>

<style>
.scroll-container {
  height: 80vh;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 20px;
}

.list-item {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  height: 50px;
}

.loading-tip {
  padding: 10px;
  text-align: center;
  color: #666;
}

.stats {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 10px;
  border-top: 1px solid #ddd;
}
</style>
